<template>
  <div class="my-view">
    <van-nav-bar title="修改密码" left-arrow @click-left="$router.back()" />
    <div class="bt">修改密码</div>
    <div class="forget-password">
      <van-form @submit="onSubmit">
        <van-field
          v-model="phone"
          name="phone"
          label="请输入手机号"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
          class="but"
        />
        <van-field
          v-model="code"
          name="code"
          label="请输入验证码"
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
          class="but"
        >
          <template #button >
            <van-button size="small" @click="getVerificationCode"
            class="huoque"
              >获取验证码</van-button
            >
          </template>
        </van-field>
        <van-field
          v-model="password"
          name="password"
          type="password"
          label="请输入密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
          class="but"
        />
        <van-field
          v-model="confirmPassword"
          name="confirmPassword"
          type="password"
          label="请确认密码"
          placeholder="请确认密码"
          :rules="[{ required: true, message: '请确认密码' }]"
          class="but"
        />
        <div class="submit-button">
          <van-button block @click="handleSubmit" class="qr"
            >确认修改</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from "vue";
import { Form, Field, Button } from "vant";

// 定义表单数据的类型
interface FormData {
  phone: string;
  code: string;
  password: string;
  confirmPassword: string;
}

export default {
  components: {
    VanForm: Form,
    VanField: Field,
    VanButton: Button,
  },
  setup() {
    const phone = ref("");
    const code = ref("");
    const password = ref("");
    const confirmPassword = ref("");

    const getVerificationCode = () => {
      console.log("获取验证码");
    };

    const handleSubmit = () => {
      console.log("提交表单");
    };

    const onSubmit = (values: FormData) => {
      console.log("表单提交值:", values);
    };

    return {
      phone,
      code,
      password,
      confirmPassword,
      getVerificationCode,
      handleSubmit,
      onSubmit,
    };
  },
};
</script>
<style scoped>
.bt {
  margin-top: 50px;
  margin-left: 50px;
  font-size: 38px;
  font-weight: 700;
}
.my-view {
  width: 95%;
  margin: 0 auto;
}
.forget-password {
  padding: 20px;
}

.submit-button {
  margin-top: 30px;
}
.qr {
  background-color: #00a299;
  color: #fff;
  border-radius: 50px;
  margin-top: 30px;
  font-size: 30px;
}
.but {
  border-bottom: 1px solid #ededed;
}
</style>

<style lang="less" scoped>
@import url(../../assets/css/coom.css);
.register {
  background-color: rgb(246, 246, 246);
  height: 100%;
  padding: 20px 40px;
  // margin-top: -36px;
}
p {
  font-size: 40px;
  font-weight: 700;
}
.yan {
  margin-left: 40px;
  margin-top: -50px;
  font-size: 40px;
}
input,button {
  background-color: rgb(246, 246, 246);
  margin-top: 50px;
  height: 80px;
  line-height: 80px;
  width: 90%;
  border: 0;
  outline: none;
  font-size: 20px;
  margin-left: 40px;
}
input {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 30px;
}
.green {
  background-color: rgb(0, 162, 153);
  color: #fff;
  border-radius: 40px;
  margin-top: 80px;
}
.yzm {
  position: relative;
  z-index: 2;
}
.yzm p {
  display: inline-block;
  width: 140px;
  height: 20px;
  position: absolute;
  font-size: 16px;
  bottom: 20px;
  right: 100px;
}
.yan button {
  margin-top: -120px;
  margin-left: 100px;
  width: 100px;
  height: 20px;
}
.huoque{
  background-color: #00a299;
  color: #fff;
  border-radius: 50px;
  width: 160px;
  height: 40px;
  margin-top: -50px;
  margin-left: -10px;
  font-size: 20px;
  padding: 20px;
}
</style>

